﻿#menu{ margin:5px 0 0 0;font-family:arial,helvetica;}
#menu ul{list-style: none;text-align:left;padding: 0;margin:0px;line-height: 1;}
#menu > ul {position: relative;display: block;z-index: 500;top: 0px;left: 0px;}
#menu:after,#menu > ul:after{content: ".";display: block;clear: both;visibility: hidden;line-height: 0;height: 0;}
#menu.align-right > ul > li{float:left;font-family:arial,helvetica;}#menu.align-center ul {text-align: center;}
#menu.align-center ul ul {text-align: left;}#menu > ul > li {display: inline-block;position: relative;margin: 0;padding: 0;}
#menu > ul > #menu-button {display: none;}
#menu ul li a{display: block;text-decoration: none;line-height:46px;font-family:arial,helvetica;}
#menu > ul > li > a{font-family:arial,helvetica;font-size: 14px; padding: 10px 18px;color: #555555; outline:none;-webkit-transition: color 2s ease-out;-moz-transition: color 2s ease-out;-ms-transition: color 2s ease-out;-o-transition: color 2s ease-out;transition: color 2s ease-out;}
#menu > ul > li.has-sub > a {padding-right: 32px;}
#menu > ul > li:hover > a {color: #555555;}
#menu li.has-sub::after {display:block;content: "";position: absolute;width: 0;height: 0;}
#menu > ul > li.has-sub::after {
  right:15px;
  top:30px;
  border:5px solid transparent;
  border-top-color: #C0C0C0;
}
#menu > ul > li:hover::after {
  border-top-color: #555555;
}
#menu ul ul {
  position: absolute;
  left: -9999px;
  min-width:135px;
  text-align:center;
  border:0px solid #cccccc;
  box-shadow: 0px 2px  5px 2px rgba(0,0,0,0.6);
  opacity: 0;
  -webkit-transition: opacity .1s ease, top .5s ease;
  -moz-transition: opacity .1s ease, top .5s ease;
  -ms-transition: opacity .1s ease, top .5s ease;
  -o-transition: opacity .1s ease, top .5s ease;
  transition: opacity .1s ease, top .5s ease;
  z-index: 1000;
}
#menu ul ul ul {
  top: 0px;
  padding-left: 5px;
}
#menu ul ul li {
  position: relative;
}
#menu > ul > li:hover > ul {
  left: auto;
  top:66px;
  opacity:1;
}
#menu.align-right > ul > li:hover > ul {
  left: auto;
  right: 0;
  opacity: 1;
}
#menu ul ul li:hover > ul {
  left: 170px;
  top: 0;
  opacity: 1;
}
#menu.align-right ul ul li:hover > ul {
  left: auto;
  right: 170px;
  top: 0;
  opacity: 1;
  padding-right: 5px;
}
#menu ul ul li a {                /***********************************/
  width:auto;
  text-align:left;
  padding: 0 10px 0 20px;
  font-family:arial,helvetica;
  font-size: 14px;
  line-height:35px;
  outline:none;
  color:#555555;
  background: #FFFFFF;
  -webkit-transition: all 2s ease;
  -moz-transition: all 2s ease;
  -ms-transition: all 2s ease;
  -o-transition: all 2s ease;
  transition: all 2s ease;
  
}
#menu.align-right ul ul li a {
  text-align: right;
}
#menu ul ul li:hover > a {
  color:#FFFFFF;
  background:#3B67B2;
}
/*----------------------Pining-------------------*/
#menu > ul > li > ul::after {
  content: '';
  border: 6px solid transparent;
  width:1px;
  height:0;
  border-bottom-color: #cccccc;
  position: absolute;
  top: -14px;
  left:50px;
}
#menu.align-right > ul > li > ul::after {
  left: auto;
  right: 30px;
}

.CssMenuButton{background-color:transparent;border:none;outline:none; cursor:pointer;}